<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :inline="true" :model="queryParams">
        <el-form-item>
          <el-form-item>
            <el-input v-model="queryParams.columnType" placeholder="字段类型" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryParams.attrType" placeholder="属性类型" />
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <el-card>
      <!-- <template #header>
        <el-button type="success" @click="addOrUpdateHandle()">
          <i-ep-plus />
          新增
        </el-button>
        <el-button
          type="danger"
          :disabled="removeIds.length === 0"
          @click="deleteBatchHandle()"
        >
          <i-ep-delete />
          删除
        </el-button>
      </template> -->
      <el-table
        v-loading="loading"
        :data="pageData"
        border
        style="width: 100%"
        @selection-change="selectionChangeHandle"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        />
        <el-table-column
          prop="columnType"
          label="字段类型"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="attrType"
          label="属性类型"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="packageName"
          label="属性包名"
          header-align="center"
          align="center"
        />
        <!-- <el-table-column
          label="操作"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              @click="addOrUpdateHandle(scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              link
              @click="deleteBatchHandle(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.size"
        @pagination="getDataList"
      />

      <!-- 弹窗, 新增 / 修改 -->
      <!-- <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList" /> -->
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import FieldTypeAPI, {
  FieldTypePageVO,
  FieldTypePageQuery,
} from "@/api/field-type";

/**查询参数  */
const queryParams = reactive<FieldTypePageQuery>({
  current: 1,
  size: 10,
});

/**查询参数 */
const queryFormRef = ref(ElForm);

const loading = ref(false);
const total = ref(0);
const removeIds = ref([]);

const pageData = ref<FieldTypePageVO[]>();

const addOrUpdateRef = ref();
/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.current = 1;
  getDataList();
}
const getDataList = () => {
  loading.value = true;
  // 假设有一个 API 接口获取数据
  FieldTypeAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const deleteBatchHandle = (id?: number) => {
  const ids = [id || removeIds.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除数据?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true;
      // 假设有一个 API 接口删除数据
      // ProjectAPI.deleteByIds(ids)
      //   .then(() => {
      //     ElMessage.success('删除成功');
      //     getDataList();
      //   })
      //   .finally(() => {
      //     loading = false;
      //   });
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
};

/** 行复选框选中记录选中ID集合 */
function selectionChangeHandle(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

onMounted(() => {
  getDataList();
});
</script>
